 <template>
    
  <div class="login">
        
    <div class="mui-content">
            
      <form class="mui-input-group">
                
        <div class="mui-input-row">
            <label>账号</label>            
          <input
            v-model="loginForm.username"
            type="text"
            class="mui-input-clear mui-input"
            placeholder="请输入账号"
          />
                  
        </div>
                
        <div class="mui-input-row">
            <label>密码</label> 
          <input
            v-model="loginForm.password"
            type="password"
            class="mui-input-clear mui-input"
            placeholder="请输入密码"
          />  
        </div>
              
      </form>
            
      <div class="mui-content-padded">
                <button
          @click="login"
          type="button"
          class="mui-btn mui-btn-block mui-btn-primary"
        >
          登录
        </button>
                
        <div class="link-area">
          <a @click="register">还没有账号？前往注册</a>
        </div>
              
      </div>
          
    </div>
      
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      // 登录
      //1.判断用户名和密码是否输入
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$toast("请输入用户名和密码");
      } else {
        //发送请求进行登录
        this.$http //http
          .post("logins", this.loginForm)
          .then((res) => {
            if (res.data.code == 1) {
              //登录失败
              this.$toast(res.data.msg);
            } else {
              console.log(res.data.msg);
              this.$toast(res.data.msg);
              // 登录成功之后 需要将用户保存到vuex中
              // 登录成功之后 需要将用户登录的session 保存到local.localStorage
              this.$store.commit("user/setUser", res.data.data); //去找 store实例里的user模块 调用在模块里面 mutation中的 setUser
              console.log(res.data.data);
              this.$auth.setAuthorization(res.data.data.session_id); // 登录成功之后 需要跳转到 我的页面
              this.$router.push("/user");
            }
          })
          .catch((e) => {
            console.log(e);
            this.$toast("登录失败");
            console.log(this.loginForm);
          }); //发送post 地址login
      }
    },
    register() {
      // 当用户点击 前往注册
      this.$router.push({ name: "register" });
    },
  },
};
</script>

<style scoped >
.mui-input-group {
  margin-top: 10px;
  background-color: transparent;
}
.mui-input-group label {
  width: 22%;
}
.mui-input-row:last-child {
  background: #fff;
}
.mui-input-row {
  margin-top: 20px;
  background: #fff;
}
.mui-input-row label ~ input,
.mui-input-row label ~ select,
.mui-input-row label ~ textarea {
  width: 78%;
}
.link-area {
  display: block;
  margin-top: 25px;
  text-align: center;
}
.mui-content-padded {
  margin-top: 30px;
}
</style>
